<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        .box {
            height: 100px;
            width: 100%;
            display: flex!important;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #000;
            margin: 0;
        }
    </style>
</head>
<body class="cloak h-100-vh">
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
    <div class="app-bar-item-static no-hover">
        <div class="text-leader">Gradients</div>
    </div>
    <div class="ml-auto mr-auto">
        To use gradient you must add classes `gradient` and `gradient-{theme}` to the element: class="gradient gradient-green"
    </div>
    <div class="app-bar-item-static no-hover ml-auto">
        <input type="checkbox" data-role="theme-switcher"/>
    </div>
</nav>
<div class="container-fluid mt-4">
    <div class="container">
        <h3>Colors</h3>
        <div class="row" id="box-container-colors"></div>

        <div class="row" id="box-container"></div>
    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
    const colors = [
        "lime", "green", "emerald", "blue", "teal", "cyan", "cobalt", "indigo", "violet", "pink", "magenta",
        "crimson", "red", "orange", "amber", "yellow", "brown", "olive", "steel", "mauve", "taupe",
        "champagne", "khaki", "charcoal", "bronze", "windstorm", "nude", "terracotta", "coral", "army", "seashell", "sand"
    ];
    
    const transitionGradients = [
        'lime-green', 'green-emerald', 'emerald-teal', 'blue-cyan', 'teal-cyan', 'cyan-blue', 'cobalt-indigo',
        'indigo-violet', 'almost-violet', 'violet-pink', 'pink-magenta', 'magenta-violet', 'crimson-red', 'red-crimson',
        'clown-red', 'orange-amber', 'amber-yellow', 'yellow-amber', 'brown-bronze', 'olive-army', 'steel-charcoal', 'mauve-violet', 'taupe-bronze',
        'champagne-nude', 'khaki-sand', 'charcoal-steel', 'bronze-brown', 'windstorm-steel', 'nude-seashell', 'terracotta-coral', 'coral-orange',
        'army-olive', 'seashell-champagne', 'sand-khaki', 'lime-green-emerald', 'green-emerald-teal', 'emerald-teal-cyan',
        'cyan-blue-cobalt', 'blue-cobalt-indigo', 'cobalt-indigo-violet', 'indigo-violet-pink', 'violet-pink-magenta', 'pink-magenta-crimson',
        'magenta-crimson-red', 'crimson-red-orange', 'red-orange-amber', 'orange-amber-yellow', 'amber-yellow-sand', 'yellow-sand-khaki', 'brown-bronze-taupe',
        'bronze-taupe-nude', 'taupe-nude-champagne', 'nude-champagne-seashell', 'steel-charcoal-windstorm', 'army-olive-khaki', 'terracotta-coral-orange'
    ]

    const flowGradients = [
        "nature-flow", "sky-flow", "sunset-flow", "purple-flow", "earth-flow", "neutral-flow", "warm-flow", "vibrant-flow"
    ]
    
    const themedGradients = [
        "blue-coral", "sunset-dream", "deep-space", "emerald-green", "purple-love", "cherry-glow", "cosmic-fusion", "sunny-morning", "winter-frost",
        "neon-pulse", "royal-elegance", "sunset", "emerald-sea", "midnight-mist"
    ]
    
    for(let color of [...colors]) {
        $("#box-container-colors").append($("<div class='cell-md-3 box bg-"+color+"'>").text(color))
    }
    $("#box-container").append($("<h3>").html("Gradients"))
    for(let color of [...colors]) {
        $("#box-container").append($(`<div class="cell-md-3 box gradient gradient-${color}">`).text(color))
    }
    $("#box-container").append($("<h3>").html("Radial Gradients"))
    for(let color of [...colors]) {
        $("#box-container").append($(`<div class="cell-md-3 box gradient gradient-radial-${color}">`).text(`radial-${color}`))
    }
    $("#box-container").append($("<h3>").html("Transition Gradients"))
    for(let color of [...transitionGradients]) {
        $("#box-container").append($(`<div class="cell-md-3 box gradient gradient-${color}">`).text(color))
    }
    $("#box-container").append($("<h3>").html("Themed Gradients"))
    for(let color of [...themedGradients]) {
        $("#box-container").append($(`<div class="cell-md-3 box gradient gradient-${color}">`).text(color))
    }
</script>
</body>
</html>
